<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">111</div>
    <div class="box" id="myids">222</div>
    <div id="myid">我是div</div>
    <script>
        
    // 一、获取一个元素 : 通过css选择器 ；
    // 注意 :只能获取一个元素，即使有多个 也只获取第一个元素；
    // var ele = document.querySelector(".box");
    // console.log(ele);

    // var ele = document.querySelector("#myid");
    // console.log(ele);

    // var ele = document.querySelector("div");
    // console.log(ele);


    // 二、获取多个元素 ：通过css选择器 ；
    // var eles = document.querySelectorAll(".box");
    // console.log(eles);

    // var eles = document.querySelectorAll("#myid");
    // console.log(eles);

    // var eles = document.querySelectorAll("div");
    // console.log(eles);

    // 三、处理伪数组 ，把伪数组转成数组；
    // function fn(){
    //     console.log(arguments);  // 隐藏参数 ： 会把 所有的参数都放在arguments伪数组里 ，处理 不定参问题 
    //     console.log([]);
    // }

    // fn(1,2,3);
    // 1. 通过 ... :展开运算符 
    // var eles = document.querySelectorAll(".box");
    // console.log(eles);
    // var arr = [...eles];  // 把伪数组转成数组；
    // console.log(arr);

    // 2.通过 var arr =  Array.from(伪数组) 方法 ;
    // var eles = document.querySelectorAll(".box");
    // console.log(eles); // 伪数组
    // var arr = Array.from(eles);  // 数组
    // console.log(arr);


    // 四 ： 元素的类型 
    // var  ele = document.querySelector(".box");
    // // console.log(ele);
    // // console.log(typeof ele);
    // // console.dir(ele);
    // ele.myname = "hello";

    // console.dir(ele);

    // function fn(){
    //     console.log(11);
    // }
    // console.log(fn);

    /* 
        总结 ： 
            一、获取元素的2种方式 
                1. 获取一个元素  ：querySelector
                2. 获取所有元素 ： ：querySelectorAll
            二 、把伪数组转成数组 
                1. ...
                2. Array.from();
            三、 元素是一个对象类型 ，可以当成对象来使用。
    */
//    1. 写一遍 2. 点击一个按钮的时候 div里姓名在 张三和李四之间切换；


    </script>
</body>
</html>